<template>
  <div class="pic-list">


    <div v-if="list && list.length > 0">
      <div class="clearfix">
        <div class="p10">
          <Button type="primary" @click="search()">批量设为外网可见</Button>
          <Button type="info" @click="search()">批量设为外网不可见</Button>
          <Button type="error" @click="search()">批量删除</Button>
        </div>

        <Card class="pic" v-for="(item, index) in list" :key="index">
          <div>
              <div class="tc pic-container" @click="onSelect(item, index)">
                <img :src="cdnUrl + '/' + item.photoPath" />

                <div class="pic-status" v-if="item.isShow === 1">
                  <Badge count="外网不可见" class-name="badge-disabled"></Badge>
                </div>

                <div class="pic-select">
                  {{item.selected}}
                </div>

                <div class="pic-handler">
                  <Row>
                    <Col span="12">
                      <a href="javascript:;" v-if="item.isShow === 1" @click="onCheck(item, 0)">
                        <Icon type="android-cloud-done"></Icon>设为外网可见
                      </a>
                      <a href="javascript:;" v-else @click="onCheck(item, 1)">
                        <Icon type="android-cloud-outline"></Icon>设为外网不可见
                      </a>
                    </Col>
                    <Col span="12">
                      <a href="javascript:;" @click="onRemove(item)">
                        <Icon type="android-delete"></Icon>删除
                      </a>
                    </Col>
                  </Row>
                </div>
              </div>
          </div>
        </Card>
      </div>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
    </div>
    <div v-else class="empty-con">
      <i></i>
      <p>该筛选条件下没有任何内容</p>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { cdnUrl } from '@/config'
  import activityApi from '@/api/activity'

  export default {
    name: 'page-activity-photo',
    props: [
      'isShow'
    ],
    data () {
      let activityId = this.$route.params.activityId
      return {
        cdnUrl,
        loading: false,
        query: {
          pkResource: activityId,
          isShow: this.isShow,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        list: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      onRemove (pic) {
        this.$Modal.confirm({
          title: '确认删除吗',
          content: '<p>删除后将不能恢复，确定删除？</p>',
          onOk: async () => {
            await activityApi.photo.remove({ pkActPhotoLs: [ pic.id ] })
            this.$Message.info('删除成功')
            this.getList()
          }
        })
      },
      onSelect (item, index) {
        this.list[index].selected = true
      },
      async onCheck (pic, status) {
        await activityApi.photo.check({
          pkActPhotoLs: [ pic.id ],
          isShow: status
        })
        this.$Message.info('设置成功')
        this.getList()
      },
      async getList () {
        this.loading = true
        const { body } = await activityApi.photo.list(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      async reloadList () {
        this.loading = true
        this.query.currentPage = 1
        const { body } = await activityApi.photo.list(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      }
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.getList()
    }
  }
</script>

<style lang="less">
  #page-activity-photo {
    .ivu-row {
      margin-bottom: 10px;
      padding-bottom: 10px;
    }

    .pic-status {
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .pic {
      .pic-handler {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: rgba(0, 0, 0, 0.8);
        a {
          color: #fff
        }
        .ivu-icon {
          margin-right: 5px;
        }
      }

      .pic-select {
        width: 100px;
        height: 100px;
        color: #5cb85c;
        text-align: center;
        line-height: 100px;
        font-size: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
      }

      &:hover {
        .pic-handler {
          display: block
        }
      }
    }
  }
</style>
